<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,minimal-ui">
    <meta name="referrer" content="no-referrer">
    <title>播放器</title>
    <style type="text/css">
        html, body {
            width:100%;
            height:100%;
            margin:auto;
            overflow: hidden;
        }
        body {
            display:flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-start;
        }
        #mse {flex:auto;}
    </style>
</head>
<body>
<div id="playerContainer"></div>
<script src="//unpkg.byted-static.com/xgplayer/2.31.2/browser/index.js" charset="utf-8"></script>
<script type="text/javascript">
    const width = parseInt(window.innerWidth / 8);
    const height = parseInt(window.innerHeight / 8);
    var videoLength = 32;
    var timer;

    function createPlayer () {
        const $video = document.createElement('div');
        $video.muted = true;
        let player= new Player({
            el: $video,
            autoplay: true,
            "url": "//lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/byted-player-videos/1.0.0/xgplayer-demo.mp4",
            playsinline: true,
            videoInit: true,
            muted: true,
            width,
            height,
            whitelist: ['']
        });
        player.once('ready',() => {
            player.video.muted = true;
            console.log('ready');
        });
        player.once('complete',() => {
            console.log('complete');
            player.play();
        });
        document.body.appendChild($video);
        console.log('---------------', $video);
        if (videoLength < 0) {
            timer && clearTimeout(timer);
            return;
        }

        timer = setTimeout(() => {
            videoLength--;
            createPlayer()
        }, 50 * (64 - videoLength))
    }

    createPlayer ();
</script>
</body>
</html>
